<template>
  <div id="MyHeader">
    <div style="margin-left: 11%; font-size: 20px">
      <b>Gitfree代码托管平台</b>
    </div>
    <div class="search">
      <el-icon size="30px" id="find" @click="search"><Search /></el-icon>
      <el-input
        v-model="input"
        placeholder="搜索"
        class="inputt"
        v-on:keyup.enter="search"
      />
      <el-badge :value="noticesNum" :hidden="noticeHideden">
        <el-icon @click="toUserNotice" size="25px" id="checknotice"
          ><Bell
        /></el-icon>
      </el-badge>

      <el-dropdown :hide-on-click="false">
        <el-avatar class="me" @click="toUserPage" :size="30">
          {{ userName.slice(0, 1) }}
        </el-avatar>
        <template #dropdown>
          <!--判断一下是否是游客-->
          <div v-if="this.username == session">
            <el-dropdown-menu>
              <!-- <el-dropdown-item @click="toUserPage">个人主页</el-dropdown-item> -->
              <!-- <el-dropdown-item @click="toUserSetting"
                >用户设置</el-dropdown-item
              > -->
              <!-- <el-dropdown-item @click="toUserNotice"
                >我的信息</el-dropdown-item
              > -->
              <el-dropdown-item @click="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </div>
        </template>
      </el-dropdown>
    </div>
  </div>
  <el-drawer
    v-model="drawer"
    title="我的信息"
    :with-header="false"
    size="550px"
  >
    <div>
      <div style="font-size: 35px; margin-bottom: 25px">
        <el-icon><Bell /></el-icon>我的消息
      </div>
      <div style="">
        <el-scrollbar style="">
          <el-timeline style="max-height: 700px">
            <el-timeline-item
              v-for="(notice, index) in notices"
              :key="index"
              :timestamp="notice.createtime"
              :color="colors[notice.isRead % 2]"
              placement="top"
            >
              <el-card
                style="
                  width: 400px;
                  height: auto;
                  justify-content: top;
                  align-content: end;
                  padding-top: 0px;
                  margin-top: 0px;
                "
              >
                <div
                  style="
                    top: 10;
                    font-size: 16px;
                    width: 280px;
                    position: absolute;
                    align-content: end;
                    display: inline-block;
                  "
                >
                  {{ notice.content }}
                </div>
                <div
                  style="width: 70; display: inline-block; margin-left: 300px"
                >
                  <div>
                    <el-tag
                      type="warning"
                      effect="dark"
                      size="large"
                      style="margin-bottom: 20px; cursor: pointer"
                      @click="setread(notice.id)"
                      >标为已读</el-tag
                    >
                  </div>
                  <div>
                    <el-tag
                      type="danger"
                      effect="dark"
                      @click="deletenotice(notice.id)"
                      style="cursor: pointer"
                      size="large"
                      >删除通知</el-tag
                    >
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-scrollbar>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { ElMessage, messageTypes } from "element-plus";
import request from "@/utils/request";
export default {
  name: "SysHeader",
  data() {
    return {
      drawer: false,
      colors: ["Red", "Green"],
      notices: [],
      noticesNum: 0,
      noticeHideden: true,
      //从session中获取
      userName: "",
      input: "", //搜索内容
    };
  },
  created() {
    this.findUserByToken();
    this.getnotice();
  },
  methods: {
    loginout() {
      sessionStorage.setItem("token", "");
      ElMessage({
        message: "已退出登录",
        type: "success",
      });
      this.$router.push("/login");
    },
    setread(noticeid) {
      request.get("/notice/setread?noticeid=" + noticeid).then((res) => {
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: "已读",
            type: "success",
          });
          this.getnotice();
        } else console.log(res.message);
      });
    },
    deletenotice(noticeid) {
      request.get("/notice/deletenotice?noticeid=" + noticeid).then((res) => {
        if (res.code == 200) {
          ElMessage({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
          this.getnotice();
        } else console.log(res.message);
      });
    },
    getnotice() {
      request.get("/notice/showNotice").then((res) => {
        if (res.code == 200) {
          this.notices = res.data;
          this.noticesNum = res.message;
          if (this.noticesNum > 0) this.noticeHideden = false;
          else this.noticeHideden = true;
        } else {
          console.log(res.message);
        }
      });
    },
    toUserNotice() {
      this.getnotice();
      this.drawer = true;
    },
    toUserPage() {
      this.$router.push(`/userhomePage/` + sessionStorage.getItem("username"));
    },
    toUserSetting() {
      this.$router.push(`/usersetting`);
    },
    findUserByToken() {
      request
        .get("/secure/getUserInfo")
        .then((res) => {
          if (res.code == 200) {
            this.userName = res.data.username;
            window.sessionStorage.setItem("username", this.userName);
            window.sessionStorage.setItem("userid", res.data.id);
          } else {
            console.log("获取用户信息失败");
          }
        })
        .catch((err) => {
          console.log("获取用户信息失败");
        });
    },
    search() {
      console.log("search");
      // if (this.input == "") {
      //   ElMessage({
      //     showClose: true,
      //     message: "请输入搜索内容",
      //     type: "warning",
      //   });
      // } else
      this.$router.push("/search/" + this.input);
    },
  },
};
</script>

<style scoped>
#MyHeader {
  background-color: #252626;
  display: flex;
  justify-content: space-between;
  padding-top: 0;
  padding-left: 10px;
  padding-right: 10px;
  height: 50px;
  align-items: center;
  font-size: medium;
  color: aliceblue;
}
.search {
  margin-right: 10%;
  top: -4px;
}
.inputt {
  width: 240px;
  margin-right: 10px;
  top: -5px;
}
#find {
  left: 0px;
  top: 5px;
}
#find:hover {
  cursor: Pointer;
  color: orange;
}
#checknotice {
  left: 0px;
}
#checknotice:hover {
  cursor: Pointer;
  color: cornflowerblue;
}
.me {
  font-size: large;
  background-color: rgb(237, 187, 100);
  text-align: center;
  margin-left: 25px;
  margin-top: 4px;
}
.me:hover {
  cursor: Pointer;
}
</style>
